<template>
  <div>
    
  <div class="contArticle">
      <!-- 标题 -->
      <div class="contArticle_tit">
       <h2>{{ pickById.pickTitle  }}</h2>
      </div>
      <div class="contArticle_author">
        <span>{{ pickById.createTime }}</span>
        <span>    来源：{{ pickById.createBy }}</span>
        <span>（浏览量：{{ pickById.click }}）</span>
      </div>

            <div class="contArticle_text">
                     <div  class="editor ql-container ql-snow">
                      <div style="margin-top: 15px;font-weight: 400;text-align: justify;font-size: 16px;line-height: 2;" class="ql-editor" v-html="pickById.pickContent"></div>
        <!-- <div if="pickById.img.length>0" v-for="(item,index) in pickById.img" :key="index">
         <img style="width: 100%;text-align: center;height: 100%" :src="item.url">
          <img style="width: 100%;text-align: center;" :src="item.url">
        </div> -->
 </div>
  </div>
            <van-divider />
            </div>
  </div>
</template>
<script>
import { getPick, updatePickClick } from '@/api/pick'

  export default {
    data(){
              return {
            pickList: [], // 活动数据
      pickById: {}, //单条活动
      upPick: '已是首条',//上一条活动
      nextPick: '已是尾条'  //下一条活动

    }

    },
   mounted(){
    this.getList(this.$root.$mp.query.id)
  
  },
  methods: {
       getList(id) {
      getPick(id).then(response => {
        this.pickById  = response.data
        this.pickById .img = this.change(this.pickById .img)
      })
       this.pickById .img.map(item=>{
          item.url=this.changeUrl(item.fileName)
        })
    }
  }

}

</script>

<style scoped>
.contArticle{
padding: 0 4%;
}

.contArticle_tit {
  width: 100%;
  font-size: 26px;
  line-height: 37px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  padding: 10px 0;
  letter-spacing: 0;
  color: #333;
  text-align: justify;
}
.contArticle_author{
  width: 100%;
  right: 0px;
  color: #999;
  font-size: 1em;
  position: relative;
  display: block;
}
.info {
  display: inline-block;
}
.info p {
  font-size: 14px;
  margin-top: 0px;
  color: #757575;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 400;
  word-wrap: break-word;
  text-align: justify;
}
.info span {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: #C2C2C2;
  letter-spacing: 0;
  margin-right: 10px;
}

.info-r {
  color: #A1A1A1;
  letter-spacing: 0;
  font-size: 10px;
  background: #F6F6F6;
  border-radius: 1px;
  font-family: PingFangSC-Medium;
  line-height: 22px;
  position: absolute;
  right: 0px;
  bottom: 0;
  padding: 0 2.4%;
}

.news_text {

  margin: 15px 0;
}



.title {
  color: #070707;
}

.time {
  text-align: right;
  color: #35353598;
  font-size: 10pt;
}
</style>
